<!--
 * @Descripttion: 模具数据类型列表
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-10 09:51:51
-->
<template>
  <div class="moldDataList-container">
    <el-card
      class="el-card-bottom-top"
      shadow="never"
      v-for="(dataGroup, index) in dataGroupArr"
      :key="index"
    >
      <template #header>
        <span>{{
          dataGroup.type +
          (!!moldDatSuffixMap[moldDataType]
            ? $t(moldDatSuffixMap[moldDataType])
            : "")
        }}</span>
      </template>
      <!-- 选择对象表格 -->
      <vxe-table
        :data="dataGroup.data || []"
        :scroll-y="{ enabled: true, gt: 50 }"
        :height="300"
        show-overflow
        show-header-overflow
        border
      >
        <vxe-column type="seq" :title="$t('table.seq')" width="50" />
        <template
          v-for="(column, index) in MoldDataTypeListUtils.tableColumnMap[
            moldDataType
          ]"
          :key="column.field"
        >
          <vxe-column
            :field="column.field"
            :min-width="100"
            :width="column.width || ''"
            :formatter="column.formatter"
            :title="
              $t(column.title) + (!!column.unit ? `(${column.unit})` : ``)
            "
          />
        </template>
      </vxe-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { moldDataTypeEnum, moldDatSuffixMap } from "../index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import MoldDataTypeListUtils from "./utils";

const props = defineProps({
  //模具数据类型
  moldDataType: {
    type: String,
    requited: true,
    default: "",
  },
  dataArr: {
    type: Array,
    requited: true,
    default: [],
  },
});

/**
 * @Author: xzh
 * @Descripttion:数据分组
 * @Param:
 */
let dataGroupArr = computed(() => {
  let { dataArr }: any = props || {};
  //根据type分组
  let typeArr: any = [
    ...new Set((dataArr || []).map((x: object_Inf) => x.type)),
  ];
  return typeArr.map((type: string) => ({
    type,
    data: dataArr.filter((x: object_Inf) => x.type == type),
  }));
});
</script>
<style lang="scss" scoped>
.moldDataList-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    calc(50% - (var(--moldDataList-item-gap) / 2))
  );
  justify-content: space-between;
  grid-column-gap: var(--moldDataList-item-gap);

  --moldDataList-item-gap: 0.5rem;
}
</style>
